<!--
 * @Description: 文件描述
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-08 17:43:33
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-09-15 11:52:18
 * @心得体会: 无
-->
<template>
    入院缴费
    <div class="w-full">
        <el-form :inline="true" :model="formInline" class="w-full h-10">
            <el-form-item label="医生姓名">
                <el-input v-model="formInline.doctorName" placeholder="医生姓名" clearable class="w-40"/>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-date-picker
                    v-model="formInline.startDate"
                    type="date"
                    placeholder="开始日期"
                    :size="size"
                />
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker
                    v-model="formInline.endDate"
                    type="date"
                    placeholder="结束日期"
                    :size="size"
                />
            </el-form-item>
            <el-form-item label="房间号">
                <el-input v-model="formInline.roomName" placeholder="房间号" clearable class="w-40"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 表格显示 -->
    <el-table :data="tableData" style="width: 100%" border height="60vh" highlight-current-row @row-dblclick="getInfo">
        <!-- <el-table-column fixed type="selection" width="50" /> -->
        <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="roomName" label="房间号"  align="center"></el-table-column>
        <el-table-column prop="doctorName" label="医生姓名"  align="center"></el-table-column>
        <el-table-column prop="location" label="位置"  align="center"></el-table-column>
        <el-table-column prop="deposit" label="押金"  align="center"></el-table-column>
        <el-table-column prop="inTime" label="入院时间"  align="center">
            <template #default="scope">
                <el-text v-if="scope.row.inTime">{{ scope.row.inTime }}</el-text>
                <el-text v-else>尚未入住</el-text>
            </template>
        </el-table-column>
        <el-table-column label="操作"  align="center">
            <template #default="scope">
                <el-tag v-if="scope.row.status" type="success"  class="cursor-pointer">已支付</el-tag>
                <el-tag v-else type="primary" class="cursor-pointer" @click="toPay(scope.row)">进行支付</el-tag>
            </template>
        </el-table-column>
    </el-table>
    <!-- 页数列表 -->
    <div class="flex justify-center items-end w-full h-16 mt-2">
        <el-pagination
            v-model:current-page="pageForm.currentPage"
            v-model:page-size="pageForm.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            />
            <el-switch v-model="background" class="ml-2" />
    </div>
    <!-- 弹出对话框 -->
    <el-dialog v-model="dialogVisible" title="支付中...." width="400" :before-close="handleClose">
        <el-form :model="payForm" label-width="auto" class="w-full">
            <el-form-item label="医生姓名">
                <el-text class="w-40">{{ payForm.doctorName }}</el-text>
            </el-form-item>
            <el-form-item label="房间号">
                <el-text class="w-40">{{ payForm.roomName }}</el-text>
            </el-form-item>
            <el-form-item label="位置">
                <el-text class="w-40">{{ payForm.location }}</el-text>
            </el-form-item>
            <el-form-item label="押金">
                <el-text class="w-40">{{ payForm.deposit }}</el-text>
            </el-form-item>
            <el-form-item label="入住时间">
                <el-text class="w-40">{{ payForm.inTime }}</el-text>
            </el-form-item>
            <el-form-item label="支付费用">
                <el-text class="w-40">{{ payForm.price }}</el-text>
            </el-form-item>
            <el-form-item label="支付方式">
                <el-select
                v-model="payForm.method"
                placeholder="选择支付方式"
                clearable
                class="w-60">
                    <el-option value="微信支付">微信支付</el-option>
                    <el-option value="支付宝支付">支付宝支付</el-option>
                </el-select>
            </el-form-item>
            这里有一个支付的图片，需要支付模块
            <el-form-item>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="payCome">
                    确定支付
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
// 表格数据
const tableData = ref([
    {id:1,doctorName:"张三",roomName: "140", location:"1",deposit:100,inTime:"",price:100, status: false},
    {id:2,doctorName:"张三",roomName: "140", location:"2",deposit:100,inTime:"2024-09-08",price:100, status: true},
    {id:3,doctorName:"张三",roomName: "140", location:"3",deposit:100,inTime:"2024-09-11",price:100, status: true},
    {id:4,doctorName:"张三",roomName: "140", location:"4",deposit:100,inTime:"",price:100, status: false},
])
// 对话框可见
const dialogVisible = ref(false)
// 北京
const background = ref(false)
// 最后一页面
const pageForm = ref({
    currentPage: 1,
    pageSize: 10,
    total: 50
})
// 搜素表
const formInline = reactive({
  doctorName: "",
  roomName:"",
  startDate: "",
  endDate: "", 
})
const pageSerch = computed(() => {
  return {
    currentPage: pageForm.value.currentPage,
    pageSize: pageForm.value.pageSize,
    doctorName: formInline.doctorName,
    roomName:formInline.roomName,
    startDate: formInline.startDate,
    endDate: formInline.endDate,
  }
})
// 预约表单
const payForm = reactive({
    id :"",
    doctorName:"",
    roomName:"",
    location:"",
    deposit:"",
    roomName:"",
    price:"",
    inTime :"",
    method : "",
})

// 搜搜
const onSearch = () => {
  console.log(pageSerch)
}
// 双击查看
const getInfo = (row) => {
  console.log(row.id)
}
// 进行支付
const toPay= (row) => {
  console.log("进行支付")
  console.log(row)
  // 设置可见
  dialogVisible.value = true
  payForm.id = row.id
  payForm.doctorName = row.doctorName
  payForm.location = row.location
  payForm.deposit = row.deposit
  payForm.roomName = row.roomName
  payForm.price = row.price
  payForm.inTime = new Date().toLocaleDateString();
  payForm.method = "微信支付"
  console.log(payForm)
}

// 取消支付
const handleClose = () => {
  ElMessageBox.confirm('你确定取消当前支付吗？',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
        dialogVisible.value = false
        ElMessage({
            type: 'success',
            message: "已取消",
        })
    })
    .catch(() => {
      
    })
}
// 确定支付
const payCome = () => {
  console.log("确定支付？")
  dialogVisible.value = false
  ElMessage({
      type: 'success',
      message: "支付成功",
  })
}
</script>

<style scoped>

</style>